<template >
        <li>
        <label>
            <input type="checkbox" :checked="todoObj.done" @click="changeTodo(todoObj.id)"/>
            <!-- 下方代码也能实现上方功能，但是不建议 ，违反了原则，修改了props-->
            <!-- <input type="checkbox" v-model="todoObj.done"/> -->
            <span>{{todoObj.name}}</span>
        </label>
        <button class="btn btn-danger" @click="delTodo(todoObj.id)">删除</button>
        </li>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
    name:'MyItem',
    props:['todoObj'],
    methods:{
        changeTodo(id){
            //事件总线发送消息
            this.$bus.$emit('updateTodo',id);
        },
        delTodo(id){
            if (confirm('确认删除吗？')) {
                //this.deleteTodo(id)
                //this.$bus.$emit('deleteTodo',id)
                //发布消息
                pubsub.publish('deleteTodo',id)
            }
        }
    }
}
</script>
<style scoped>
    

    /*item*/
    li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    }

    li label {
    float: left;
    cursor: pointer;
    }

    li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    }

    li button {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }
    li:hover{
        background-color: antiquewhite;
    }
    li:hover button{
        display: block;
    }
</style>